<template>
  <div class="wrap" :style="{minHeight:$store.state.minHeight+'rem'}">
    <myHead title="确认订单"></myHead>
    <div class="address" @click="jump('addAddress')" v-show="!address?true:false">
      <span>添加地址</span>
      <img src="../../../static/img/add.png" alt="">
    </div>
    <div class="selectedAddress" v-show="address?true:false">
      <div class="select_top" @click="jump('myAddress')">
        <div class="sel_top">
          <div><img src="../../../static/img/moren.png" alt="" v-if="address.type == 1"><p>{{address.dispatching+address.particular}}</p></div>
          <p>{{address.name}}&emsp;{{address.phone}}</p>
        </div>
        <img src="../../../static/img/youjiantou3.png" alt="">
      </div>
      <div class="select_bot" v-if="sendType.type==1"><span>到店自取</span><span></span></div>
      <div class="select_bot" v-else><span>立即送出</span><span>大约{{psTime[0]}}:{{psTime[1]}}送达</span></div>
    </div>
    <div class="info">
      <div class="infoTop">
        <img :src="$store.state.imgurlApi+shopImg" alt="">
        <div class="infoMsg">
          <p>{{shop.title}}</p>
          <div class="msg_2"><p>规格:&nbsp;&nbsp;<span>默认</span></p><p>&nbsp;&nbsp;<span></span></p></div>
          <div class="num">
            <p>{{shop.integral}}积分+￥{{shop.money}}</p>
            <p>x<span>1</span></p>
          </div>
        </div>
      </div>
      <div class="infoBot">
        <span>配送费</span>
        <span>￥0</span>
      </div>
      <!--<div class="infoBot">-->
      <!--  <span>包装费</span>-->
      <!--  <span>￥{{psMoney[1]}}</span>-->
      <!--</div>-->
    </div>
    <div class="bottom">
        <div class="bot-item">
          <p>实扣积分</p>
          <p>{{shop.integral}}积分</p>
        </div>
        <div class="bot-item">
          <p>订单总价</p>
          <p>￥{{shop.money}}</p>
        </div>
        <div class="bot-shopMsg">
            <p>买家留言</p>
          <textarea name=""  placeholder="留言保持20字以内" v-model="txtVal"></textarea>
        </div>
        <div class="bot-money">
            <p><span>原价</span><span>￥{{shop.original_price}}</span></p>
            <p><span>小计</span><span>-{{shop.integral}}积分</span></p>
        </div>
    </div>
    <footer>
      <div class="foot_left">
        <p>小计 <span>￥{{shop.original_price}}</span></p>
      </div>
      <div class="submit" @click="popup">提交订单</div>
    </footer>

    <van-popup v-model="isHide" class="fkPopup" get-container="body" :close-on-click-overlay="false" :closeable="true" @close="closeOrder">
      <div class="popup" >
        <div class="popup_box">
          <img src="../../../static/img/dingdan1.png" alt="">
          <span class="pop1">订单支付成功</span>
          <span class="pop2">店家正在为您备货</span>
          <div class="pop3" @click="jump('orderDetails')">查看订单</div>
        </div>
      </div>
      <p style="width: 100%;height: .01rem"></p>
    </van-popup>

    <!--付款弹窗-->
    <van-dialog v-model="isPay" title="订单支付"  show-cancel-button width="3.2rem" :beforeClose="beforeClose" cancel-button-text="微信支付" confirm-button-text="余额支付">
      <div class="payTxt">
        本次需要支付<span style="color: #FF7611">￥{{shop.original_price}}&nbsp;+&nbsp;</span><span style="color: #FF7611">{{shop.integral}}积分</span>
      </div>
    </van-dialog>
  </div>
</template>

<script>
  import myHead from "../../components/ClientComponents/lib/myHead";

  export default {
    name: "integralOrder",
    components: {
      myHead
    },
    data(){
      return {
        isShow:true,
        isHide:false,
        txtVal:'', // 买家留言
        address:'', // 显示地址
        shop:'', // 商品详情
        shopImg:'', // 商品图片
        isPay:false,
        psMoney:[], // 配送费与包装费
        order_id:"", // 订单ID
        sendType:0, // 配送方式
        psTime:0, // 配送时间
      }
    },
    beforeCreate(){
      this.$nextTick(res=>{
        var date = new Date();
        var min = date.getMinutes();
        date.setMinutes(min+40);
        var h = date.getHours() < 10 ? ('0' + date.getHours()) : date.getHours();
        var f = date.getMinutes() < 10 ? ('0' + date.getMinutes()) : date.getMinutes();
        this.psTime = [h,f];
      });
      // 获取商品详情
      this.$myAxios('index/Integral/details','post',{
        pid:this.$route.query.id
      }).then(res=>{
        if (res.data.state == '1') {
          this.$nextTick(()=>{
            this.shop = res.data.integral_goods;
            console.log(this.shop);
            var url = this.shop.image;
            this.shopImg = url.split(',')[0];
          });
          // 获取包装费与配送费
          // this.$myAxios('store/index/info','post',{
          //   store_id:res.data.integral_goods.id
          // }).then(res=>{
          //   console.log(res.data)
          //   this.$nextTick(()=>{
          //     this.psMoney = [res.data.data.config_info[18].value,res.data.data.config_info[19].value]
          //   })
          // });
        } else {
          this.$myNotice('网络出现问题~',1500)
        }
      })
    },
    created(){
      this.sendType = JSON.parse(this.$route.query.type);
      // 获取用户默认地址
      // 请求地址列表
      this.$myAxios('index/address/index','post',{
        user_id:this.$myStorage.query()
      }).then(res=>{
        if (res.data.state) {
          if (this.$myStorage.query('mr')){
              this.address = res.data.address[this.$myStorage.query('mr')]
          }else {
              for (var i of res.data.address) {
                if (i.type == 1){
                  this.address = i;
                  break;
                }
              }
          }
        }else {
          this.$myNotice('记得填写地址！',3000);
        }
        console.log(this.address)
      });
    },
    methods:{

      beforeClose(action,done){
        if (action === 'confirm') {
          // 余额支付
          this.$myAxios('index/Integral/integral_goods','post',{
            integral:this.shop.integral,
            pound:this.shop.money,
            pid:this.shop.id,
            user_id:this.$myStorage.query(),
            courier_id:this.address.id,
            remark:this.txtVal,
            type_way:this.sendType.type,
            shipping_fee:''
          }).then(res=>{
            if (res.data.state == 1) {
              var order_id = res.data.integral_order.id;
              this.$myAxios('index/Order/pay','post',{
                user_id:this.$myStorage.query(),
                id:order_id,
                total_price:this.shop.money,
                integral:this.shop.integral,
                type:10
              }).then(res=>{
                if (res.data.state == 1) {
                  this.$store.commit('obtainUserInfo',this.$myStorage.query());
                  setTimeout(res=>{
                    done();
                    this.isHide = true;
                  },500)
                }else {
                  setTimeout(res=>{
                    this.$myNotice('余额不足',2000);
                    done();
                  },500);
                }
              })
            } else {
              this.$myNotice('请检查网络！',1500)
            }
          })
        } else {
          // 微信支付
          this.$myNotice('微信支付暂未开通！',1500);
          setTimeout(res=>{
            done();
          },500)
        }
      },
      jump(page){
        this.$router.push({
          name:page
        })
      },
      submission(){
        this.isShow = !this.isShow;
      },
      popup(){
        if (!this.address) {
          this.$myNotice('请填写地址~',1500);
          return
        }
        this.isPay = true;
        // this.isHide = true;
      },
      closePopup(){
        this.isHide = false;
      },
      closeOrder(){
        this.$router.back();
      }
    },
    watch:{
      txtVal(){
        this.txtVal = this.txtVal.length>20?this.txtVal = this.txtVal.substring(0,20):this.txtVal;
      }
    }
  }
</script>

<style scoped>
  .wrap {
    width: 100%;
    box-sizing: border-box;
    padding-top: .5rem;
    background-color: #F5F5F5;
  }

  .address {
    width: 3.51rem;
    height: .46rem;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0 .02rem .05rem 0 rgba(151, 151, 151, 0.06);
    border-radius: .07rem;
    margin: .1rem auto;
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: center;
  }

  .address > span {
    color: #FF7611;
    font-size: .16rem;
    font-family: PingFang SC;
    font-weight: 500;
  }

  .address > img {
    width: .11rem;
    height: .11rem;
    margin-left: .05rem;
  }
  .info {
    width: 3.51rem;
    box-sizing: border-box;
    min-height: 1.4rem;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0 .06rem .11rem 0 rgba(225, 225, 225, 0.28);
    border-radius: .07rem .07rem .07rem .07rem;
    margin: .1rem auto;
    padding: .15rem .1rem 0 .1rem;
  }
  .infoTop {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-flow: row;
    justify-content: flex-start;
    align-items: center;
    border-bottom:.01rem solid #F4F4F4;
    padding-bottom: .1rem;
  }
  .infoTop > img {
    width: .73rem;
    height: .6rem;
  }
  .infoMsg {
    width: calc(100% - .83rem);
    margin-left: .1rem;
    height: .6rem;
    display: flex;
    flex-flow: column;
    justify-content: space-between;
  }
  .infoMsg > p:nth-child(1) {
    width: 100%;
    font-size: .15rem;
    line-height: .15rem;
    font-family: Adobe Heiti Std;
    font-weight: 500;
    color: #282828;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .msg_2 {
    color: #717171;
    font-size:.14rem;
    line-height: .14rem;
    font-family: PingFang SC;
    font-weight: 500;
    display: flex;
    flex-flow: row;
    align-items: center;
  }
  .msg_2>p {
    margin-right: .1rem;
  }
  .num {
    display: flex;
    flex-flow: row;
    align-items: center;
    height: .14rem;
  }
  .num>p:nth-child(1) {
    line-height: .14rem;
    font-size:.15rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #FA3C2A;
    margin-right: .3rem;
  }
  .num>p:nth-child(2) {
    font-size:.12rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #424242;
  }
  .infoBot {
    width: 100%;
    height: .5rem;
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    align-items: center;
    font-size: .15rem;
    color: #171717;
    font-family:PingFang SC;
    font-weight: bold;
    box-sizing: border-box;
    padding: 0 .05rem;
  }

  .bottom {
    width:3.51rem;
    background:rgba(255,255,255,1);
    box-shadow:0 .6rem .11rem 0 rgba(225,225,225,0.28);
    border-radius:.07rem .07rem .07rem .07rem;
    box-sizing: border-box;
    margin: .1rem auto;
    padding: .1rem .1rem;
  }
  .bot-item {
    height: .4rem;
    box-sizing: border-box;
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: space-between;
    border-bottom: .01rem solid #F4F4F4;
  }
  .bot-item:nth-last-child(1) {
    border-bottom: none;
  }
  .bot-item>p,.bot-shopMsg>p {
    font-size:.14rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #2D2C2C;
  }
  .bot-shopMsg {
    padding-top: .1rem;
    display: flex;
    flex-flow: row;
    align-items: flex-start;
    justify-content: space-between;
  }
  .bot-shopMsg>textarea {
    width: 2rem;
    height: .5rem;
    resize: none;
    border: none;
    font-size:.14rem;
    text-align: right;
  }
  .bot-shopMsg>textarea::placeholder {
    font-size:.14rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #717171;
    text-align: right;
  }
  .bot-money {
    height: .4rem;
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: flex-end;
  }
  .bot-money>p:nth-child(1) {
    height: .25rem;
    display: flex;
    flex-flow: row;
    align-items: flex-end;
    font-size:.12rem;
    font-family:PingFang SC;
    font-weight:500;
    text-decoration:line-through;
    margin-right: .1rem;
  }
  .bot-money>p:nth-child(1)>span:nth-child(1) {
    color: #2D2C2C;
  }
  .bot-money>p:nth-child(1)>span:nth-child(2) {
    color: #E60012;
  }
  .bot-money>p:nth-child(2) {
    height: .25rem;
    display: flex;
    flex-flow: row;
    align-items: flex-end;
    color: #FF7611;
    font-family:PingFang SC;
    font-weight:500;
  }
  .bot-money>p:nth-child(2)>span:nth-child(1) {
    font-size: .14rem;
  }
  .bot-money>p:nth-child(2)>span:nth-child(2) {
    font-size: .16rem;
  }




  footer {
    width:3.4rem;
    height:.5rem;
    background:linear-gradient(0deg,rgba(255,191,37,1) 0%,rgba(255,191,37,1) 100%);
    box-shadow:0 .06rem .11rem 0 rgba(255,118,17,0.4);
    margin: .25rem auto 0;
    border-radius: .3rem;
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    align-items: center;
    overflow: hidden;
  }

  .foot_left {
    width: 2.49rem;
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: flex-end;
    box-sizing: border-box;
    padding: 0 .15rem;
  }
  .foot_left>p {
    font-size: .14rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #ffffff;
  }
  .foot_left>p>span {
    font-size: .18rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #ffffff;
  }
  .submit {
    width: .91rem;
    height: 100%;
    color: #ffffff;
    font-size:.16rem;
    font-family:PingFang SC;
    font-weight:bold;
    line-height: .5rem;
    background:linear-gradient(90deg,rgba(255,118,17,1) 1%,rgba(255,118,17,1) 100%);
    text-align: center;
  }

  .selectedAddress {
    width:3.52rem;
    min-height:1.46rem;
    background:rgba(255,255,255,1);
    border-radius:.07rem .07rem .07rem .07rem;
    margin: .1rem auto;
    box-sizing: border-box;
    padding: 0 .1rem;
  }
  .select_top {
    border-bottom: .01rem solid rgba(244,244,244,1);
    width: 100%;
    height: .9rem;
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    align-items: center;
  }
  .select_top>img:nth-child(2) {
    width: .08rem;
    height: .15rem;
    margin-right: .1rem;
  }
  .sel_top {
    width: 90%;
    display: flex;
    flex-flow: column;
    justify-content: space-between;
  }
  .sel_top>div {
    display: flex;
    flex-flow: row;
    align-items: center;
    margin-bottom: .1rem;
  }
  .sel_top>div>img {
    width: .31rem;
    height: .2rem;
    margin-right: .1rem;
  }
  .sel_top>div>p {
    font-size:.16rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #1D1D1D;
  }
  .sel_top>p:nth-child(2) {
    font-size:.14rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #3D3D3D;
  }
  .select_bot {
    width: 100%;
    height: .5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .select_bot {
    font-size:.14rem;
    font-family:PingFang SC;
    font-weight:500;
  }
  .select_bot>span:nth-child(1) {
    color: #171717;
  }
  .select_bot>span:nth-child(2) {
    color: #FF7611;
  }

  .popup {
    width: 100%;
    height: 100%;
  }

  .popup>img:nth-child(2) {
    width: .3rem;
    height: .3rem;
    position: absolute;
    right: .3rem;
    top: 20%;
    z-index: 9999;
  }

  .popup_box {
    width:2.6rem;
    min-height:2.55rem;
    background:rgba(255,255,255,1);
    border-radius:.07rem;
    display: flex;
    flex-flow: column;
    justify-content: space-around;
    align-items: center;
    box-sizing: border-box;
    padding: .25rem 0 .35rem;
  }
  .popup_box>img {
    width: .93rem;
    height: .86rem;
  }
  .pop1 {
    font-size:.2rem;
    font-family:PingFang SC;
    font-weight:bold;
    color: #FF7611;
  }
  .pop2 {
    font-size:.12rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #999999;
    margin: .05rem 0;
  }
  .pop3 {
    width:1.73rem;
    height:.38rem;
    background:linear-gradient(90deg,rgba(255,142,65,1) 0%,rgba(255,110,0,1) 100%);
    border-radius:.19rem;
    font-size:.18rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #ffffff;
    line-height: .38rem;
    text-align: center;
    letter-spacing: .02rem;
  }
  .bodyHide {
    overflow: hidden;
  }

  /* 弹窗适配 */
  >>> .fkPopup {
    padding: .02rem;
    background-color: transparent;
  }

  /* 弹窗 */
  /deep/ .van-dialog {
    font-size: .16rem !important;
    border-radius: .16rem !important;
    width: 3.2rem !important;

  }
  >>> .van-button--large {
    line-height: .48rem;
    height: .5rem;
  }
  >>> .van-button {
    font-size: .16rem;
    border-radius: .02rem;
  }
  >>> .van-dialog__header {
    line-height: .24rem;
  }
  >>> .van-dialog__header--isolated {
    padding: .24rem 0;
  }

  .payTxt {
    height: .5rem;
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: center;
    font-size:.14rem;
    font-family:PingFang SC;
    color: #1D1D1D;
  }
</style>
